import '../styles/index.css';
import $ from 'jquery';
import throttle from "lodash.throttle";
$(function () {
  const defaultPlaceholder = '################';
  let currentLabel = '';
  let labelArr: string[] = [];
  let currentNum = '';
  let lis = '';
  for (let a = 0; a < defaultPlaceholder.length; a++) {
    lis += '<li><span class="text">'+ defaultPlaceholder[a] +'</span></li>'
  }
  $('.labels').html(lis);
  const ifn = throttle(handleInput, 300);
  $('.inp').on('input', ifn);
  const reg = /^[\w|\d]{1}$/;
  $('.inpNum').on('keyup', function (event) {
    const val = $(this).val().toString();
    if (!val) return;
    if (reg.test(event.key)) {
      refreshNumbers(val);
    } else if (event.key.toLocaleLowerCase() === 'backspace') {
      refreshNumbers(val, true);
    }
  });

  function handleInput() {
    // @ts-ignore
    currentLabel = $(this).val().toString();
    if (currentLabel) {
      labelArr = changeLabelArr(currentLabel);
      refreshLabels();
    }
  }
  
  function refreshNumbers(val: string, isDel = false) {
    let numStr = '';
    const strArr = val.split('');
    if (isDel && currentNum) {
      const lastChar = currentNum.charAt(currentNum.length - 1);
      for (let a = 0; a < strArr.length; a++) {
        numStr += '<li>'+ strArr[a] +'</li>';
      }
      $('.numbers').html(numStr);
      $('.numbers').append('<li>'+ lastChar +'</li>');
      setTimeout(() => {
        $('.numbers li:last').addClass('last').on('transitionend', function () {
          $(this).remove();
          currentNum = val;
        });
      }, 50);
    } else {
      const lastChar = strArr.pop();
      for (let a = 0; a < strArr.length; a++) {
        numStr += '<li>'+ strArr[a] +'</li>';
      }
      $('.numbers').html(numStr);
      $('.numbers').append('<li class="last">'+ lastChar +'</li>');
      setTimeout(() => {
        $('.numbers li:last').removeClass('last');
        currentNum = val;
      }, 50);
    }
  }

  function refreshLabels() {
    if (labelArr.length) {
      for (let a = 0; a < labelArr.length; a++) {
        const li = $('.labels li').eq(a);
        const spanText = li.children('.text:first').text();
        if (labelArr[a] !== spanText) {
          changeShow(li, spanText, labelArr[a]);
        } else if (labelArr[a] === '#') {
          break;
        }
      }
    }
  }
  function changeShow(el: JQuery<HTMLElement>, oldVal: string, newVal: string): void {
    el.html(`<span class="text">${oldVal}</span><span class="text">${newVal}</span>`);
    setTimeout(function () {
      el.find('.text:first').css({
        transform: 'translateY(-21px)',
        opacity: 0
      });
      el.find('.text:nth-of-type(2)').css({
        transform: 'translateY(-21px)',
        opacity: 1
      }).on('transitionend', function () {
        el.html(`<span class="text">${newVal}</span>`);
      });
    }, 50)
  }
  function changeLabelArr(label: string): string[] {
    const result = [];
    const arr = label.split('');
    for (let a = 0; a < defaultPlaceholder.length; a++) {
      const label = arr[a] ?? defaultPlaceholder[a];
      result.push(label);
    }
    return result;
  }
});
